<template>
  <!-- 发货单报表（店铺） -->
  <div class="fba-report-shop">
    <div class="search-w">
      <a-space>
        <a-select v-model="searchVal.shopId" placeholder="选择店铺" style="width: 300px" allow-search allow-clear>
          <a-option v-for="(shop, i) in shopList" :key="i" :value="shop.sellerMarketId" :label="shop.shopName" />
        </a-select>
        <a-range-picker v-model="searchVal.times" style="width: 254px; margin-right: 5px" allow-clear shortcuts-position="left" :shortcuts="rangeShortcuts('YYYY-MM-DD HH:mm:ss')" valueFormat="YYYY-MM-DD HH:mm:ss" :timePickerProps="{ defaultValue: ['00:00:00', '23:59:59'] }" />
        <a-button type="primary" @click="getTableListByVal">搜索</a-button>
      </a-space>
    </div>
    <div class="table-w">
      <a-table class="table-singe-line show-border-table" @sorter-change="sorterChange" ref="tableRef" row-key="id" :summary="true" :scroll="{ y: '100%' }" :loading="tableLoading" :data="tableList" size="mini" :bordered="{ headerCell: true }" :pagination="false">
        <template #columns>
          <a-table-column data-index="sort" title="序号" :width="45">
            <template #cell="{ rowIndex }">
              <p>{{ rowIndex + 1 }}</p>
            </template>
          </a-table-column>
          <a-table-column data-index="date" title="日期" :width="140">
            <template #cell="{ record }">
              <p>{{ $setTime(record.dataDate, 'YYYY-MM-DD') }}</p>
            </template>
          </a-table-column>
          <a-table-column data-index="shopName" title="店铺" :width="90">
            <template #cell="{ record }">
              <TextLimit :rows="2" :val="record.shopName" />
            </template>
          </a-table-column>
          <a-table-column title="提交仓库数">
            <a-table-column data-index="submitUrgentAmt" title="紧急" :width="70" :sortable="sortable" />
            <a-table-column data-index="submitCommonAmt" title="普通" :width="70" :sortable="sortable" />
            <a-table-column data-index="submitAmt" title="合计" :width="70" :sortable="sortable" />
          </a-table-column>
          <a-table-column title="确认发货数">
            <a-table-column data-index="shippedUrgentAmt" title="紧急" :width="70" :sortable="sortable" />
            <a-table-column data-index="shippedCommonAmt" title="普通" :width="70" :sortable="sortable" />
            <a-table-column data-index="shippedAmt" title="合计" :width="70" :sortable="sortable" />
          </a-table-column>
          <a-table-column data-index="receiveAmt" title="FBA签收数" :width="100" :sortable="sortable" />
        </template>
        <template #summary-cell="{ column }">
          <p v-if="column.dataIndex == 'sort'">合计</p>
          <p v-else-if="!['date', 'shopName'].includes(column.dataIndex)">{{ sumMap[column.dataIndex] }}</p>
        </template>
      </a-table>
    </div>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, PropType } from 'vue'
  import { rangeShortcuts } from '@/utils/timeFormat'
  import { findFbaShipmentStatisticsByShop, findFbaShipmentStatisticsSumByShop } from '@/api/purchase'
  onMounted(() => {
    getTableList()
  })
  const props = defineProps({
    shopList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })

  const searchVal = ref<any>({
    pageSize: 20,
    pageNum: 1,
  })
  const total = ref(0)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])

  const sortable: any = ref({
    sortDirections: ['descend', 'ascend'],
    sorter: true,
  })
  const sumMap = ref<any>({})

  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getTableList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getTableList()
  }
  function getTableListByVal() {
    searchVal.value.pageNum = 1
    getTableList()
  }

  // 排序
  function sorterChange(dataIndex: string, direction: string) {
    searchVal.value.sortField = dataIndex
    searchVal.value.sortType = direction == 'ascend' ? 1 : -1
    getTableList()
  }
  // 获取商品列表
  async function getTableList() {
    let params: any = JSON.parse(JSON.stringify(searchVal.value))
    if (params.times?.length) {
      params.startDate = params.times[0]
      params.endDate = params.times[1]
      delete params.times
    }
    tableLoading.value = true
    const res: any = await findFbaShipmentStatisticsByShop(params)
    tableLoading.value = false
    tableList.value = res?.data?.records || []
    total.value = res?.data?.total || 0
    getSumMap(params)
  }
  // 获取合计数量
  async function getSumMap(params: any) {
    const res: any = await findFbaShipmentStatisticsSumByShop(params)
    sumMap.value = res?.data || {}
  }
</script>
<style lang="less" scoped>
  :deep(.arco-table-sorter) {
    margin-left: 0;
  }
  .fba-report-shop {
    display: flex;
    height: calc(100% - 42px);
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    .header {
      margin-bottom: 10px;
      h3 {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .time {
        color: #999;
      }
    }
    .search-w {
      display: flex;
      margin-bottom: 10px;
    }
    .table-w {
      flex: 1;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .pagination-footer {
      margin-bottom: 0;
    }
    :deep(.arco-table-scroll-y) {
      border-bottom: none;
    }
  }
</style>
